<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
         "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd">
<html>
<head>
<!-- <link rel="stylesheet" href="csstest.css" type="text/css"> -->
<title>HTML demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="Author" content="Tamal Kanti Nath">
<style type="text/css">
dt {
	font-weight: bold;
}
table#groups col {
    border-style: solid;
    border-width: 1pt;
}
table#groups tbody tr:nth-child(even) {
    background-color: background;
}
table#image td {
	height: 100pt; width: 100pt;
	background-image: url('content/bullet.png');
    background-repeat: no-repeat;
}
table#border td {
    border-style: solid;
    border-width: 3pt;
    -moz-border-radius: 7pt;
}
table#cursor td:HOVER {
    background-color: yellow;
}
ul#counter li {
    list-style-type: none;
}
ul#counter {
    counter-reset: section1;
}
ul#counter > li > ul {
    counter-reset: section2;
}
ul#counter > li > ul > li > ul {
    counter-reset: section3;
}
ul#counter > li:BEFORE {
    counter-increment: section1;
    content: counter(section1) ". ";
}
ul#counter > li > ul > li:BEFORE {
    counter-increment: section2;
    content: counter(section1) "." counter(section2) ". ";
}
ul#counter > li > ul > li > ul > li:BEFORE {
    counter-increment: section3;
    content: counter(section1) "." counter(section2) "." counter(section3) ". ";
}
</style>
</head>
<body>
	<h3>Lists</h3>
	<table>
		<tr>
			<td>
				<ul style="list-style-type: circle">
					<li>Circle style bullet</li>
					<li>Circle style bullet</li>
				</ul>
			</td>
			<td>
				<ul style="list-style-type: disc">
					<li>Disc style bullet</li>
					<li>Disc style bullet</li>
				</ul>
			</td>
			<td>
				<ul style="list-style-type: square">
					<li>Square style bullet</li>
					<li>Square style bullet</li>
				</ul>
			</td>
		</tr>
		<tr>
			<td>
				<ol style="list-style-type: decimal;">
					<li>Decimal list</li>
					<li>Decimal list</li>
					<li>Decimal list</li>
					<li>Decimal list</li>
				</ol>
			</td>
			<td>
				<ol style="list-style-type: decimal-leading-zero;">
					<li>Decimal (zero) list</li>
					<li>Decimal (zero) list</li>
					<li>Decimal (zero) list</li>
					<li>Decimal (zero) list</li>
				</ol>
			</td>
			<td>
				<ol style="list-style-type: lower-alpha;">
					<li>lower-alpha List</li>
					<li>lower-alpha List</li>
					<li>lower-alpha List</li>
					<li>lower-alpha List</li>
				</ol>
			</td>
			<td>
				<ol style="list-style-type: lower-greek;">
					<li>lower-greek List</li>
					<li>lower-greek List</li>
					<li>lower-greek List</li>
					<li>lower-greek List</li>
				</ol>
			</td>
		</tr>
		<tr>
			<td>
				<ol style="list-style-type: lower-roman;">
					<li>lower-roman List</li>
					<li>lower-roman List</li>
					<li>lower-roman List</li>
					<li>lower-roman List</li>
				</ol>
			</td>
			<td>
				<ol style="list-style-type: upper-alpha;">
					<li>upper-alpha List</li>
					<li>upper-alpha List</li>
					<li>upper-alpha List</li>
					<li>upper-alpha List</li>
				</ol>
			</td>
			<td>
				<ol style="list-style-type: upper-roman;">
					<li>upper-roman List</li>
					<li>upper-roman List</li>
					<li>upper-roman List</li>
					<li>upper-roman List</li>
				</ol>
			</td>
			<td>
				<ul style="list-style-image: url('content/bullet.png');">
					<li>Image URL bullet</li>
					<li>Image URL bullet</li>
				</ul>
			</td>
		</tr>
		<tr>
		</tr>
	</table>
	<h3>Types of Text</h3>
	<dl>
		<dt>EM:</dt>
		<dd>
			Indicates <em>emphasis</em>.
		</dd>
		<dt>STRONG:</dt>
		<dd>
			Indicates <strong>stronger emphasis</strong>.
		</dd>
		<dt>CITE:</dt>
		<dd>
			Contains a citation or a reference to <cite>other sources</cite>.
		</dd>
		<dt>DFN:</dt>
		<dd>
			Indicates that this is the
			<dfn>defining instance</dfn>
			of the enclosed term.
		</dd>
		<dt>CODE:</dt>
		<dd>
			Designates a fragment of
			<code>computer code</code>
			.
		</dd>
		<dt>SAMP:</dt>
		<dd>
			Designates
			<samp>sample output</samp>
			from programs, scripts, etc.
		</dd>
		<dt>KBD:</dt>
		<dd>
			Indicates
			<kbd>text to be entered</kbd>
			by the user.
		</dd>
		<dt>VAR:</dt>
		<dd>
			Indicates an instance of a
			<var>variable or program argument</var>
			.
		</dd>
		<dt>ABBR:</dt>
		<dd>
			Indicates an abbreviated form (e.g., <abbr title="World Wide Web">WWW</abbr>, <abbr title="Hyper Text Transfer Protocol">HTTP</abbr>, <abbr title="Uniform Resource Identifier">URI</abbr>, Mass., etc.).
		</dd>
		<dt>ACRONYM:</dt>
		<dd>
			Indicates an acronym (e.g., <acronym title="Beginner's All-purpose Symbolic Instruction Code">BASIC</acronym>, <acronym title="Common Business Oriented Language">COBOL</acronym>, <acronym title="RAdio Detection And Ranging">RADER</acronym> etc.).
		</dd>
		<dt>QUOTE:</dt>
		<dd>
			Amal said <q>Vinod told me <q>Good job!</q></q>.
		</dd>
		<dt>BLOCKQUOTE:</dt>
		<dd>
			<blockquote>
				<p>These two elements designate quoted text. BLOCKQUOTE is for long quotations (block-level content) and Q is intended for short quotations (inline content) that don't require paragraph breaks.</p>
			</blockquote>
		</dd>
		<dt>SUPERSCRIPT:</dt>
		<dd>
			(a + b)<sup>3</sup> = a<sup>3</sup> + 3a<sup>2</sup>b + 3ab<sup>2</sup> + b<sup>3</sup>
		</dd>
		<dt>SUBSCRIPT:</dt>
		<dd>
			Zn + H<sub>2</sub>SO<sub>4</sub> = ZnSO<sub>4</sub> + H<sub>2</sub>
		</dd>
		<dt>MathML:</dt>
		<dd>
			Given the quadratic equation
			<math xmlns="http://www.w3.org/1998/Math/MathML"> <mrow> <mi>a</mi> <mo>&InvisibleTimes;</mo> <msup> <mi>x</mi> <mn>2</mn> </msup> <mo>+</mo> <mi>b</mi> <mo>&InvisibleTimes;</mo> <mi>x</mi> <mo>+</mo> <mi>c</mi> </mrow> </math>
			, the roots are given by
			<math xmlns="http://www.w3.org/1998/Math/MathML"> <mrow> <mi>x</mi> <mo>=</mo> <mfrac> <mrow> <mo form="prefix">&minus;</mo> <mi>b</mi> <mo>&PlusMinus;</mo> <msqrt> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo>&minus;</mo> <mn>4</mn> <mo>&InvisibleTimes;</mo> <mi>a</mi> <mo>&InvisibleTimes;</mo> <mi>c</mi> </msqrt> </mrow> <mrow> <mn>2</mn> <mo>&InvisibleTimes;</mo> <mi>a</mi> </mrow> </mfrac> </mrow> </math>
			.
		</dd>
		<dt>INSERT:</dt>
		<dd>
			This line is
			<ins>inserted</ins>
			!
		</dd>
		<dt>DELETE:</dt>
		<dd>
			This line is
			<del>deleted</del>
			!
		</dd>
		<dt>ADDRESS:</dt>
		<dd>
			<address>The ADDRESS element may be used by authors to supply contact information.</address>
		</dd>
		<dt>BR:</dt>
		<dd>
			This is a<br />Line Break.
		</dd>
		<dt>PRE:</dt>
		<dd>
			<fieldset>
				<legend>FIELDSET &amp; LEGEND</legend>
				<pre>This is a preformatted text.
            Symbols like &, < and > won't have a special meaning.</pre>
			</fieldset>
		</dd>
	</dl>
	<h3>HR</h3>
	<p>1in = 2.54cm = 25.4mm = 72pt = 96px = 6pc = 6em (font-size:16px) ~ 12ex</p>
	<table border="1">
		<colgroup />
		<colgroup width="600pt"/>
		<tr>
			<td>width: 5in</td>
			<td><hr style="width: 5in;" /></td>
		</tr>
		<tr>
			<td>width: 12.7cm</td>
			<td><hr style="width: 12.7cm;" /></td>
		</tr>
		<tr>
			<td>width: 127mm</td>
			<td><hr style="width: 127mm;" /></td>
		</tr>
		<tr>
			<td>width: 360pt</td>
			<td><hr style="width: 360pt;" /></td>
		</tr>
		<tr>
			<td>width: 480px</td>
			<td><hr style="width: 480px;" /></td>
		</tr>
		<tr>
			<td>width: 30pc</td>
			<td><hr style="width: 30pc;" /></td>
		</tr>
		<tr>
			<td>width: 30em</td>
			<td><hr style="width: 30em;" /></td>
		</tr>
		<tr>
			<td>width: 60ex</td>
			<td><hr style="width: 60ex;" /></td>
		</tr>
		<tr>
			<td>width: 80%</td>
			<td><hr style="width: 80%;" /></td>
		</tr>
	</table>
	<h3>Table</h3>
	<table>
		<tr>
			<td>
				<table border="1">
					<caption>Normal table</caption>
					<tr>
						<th>Key</th>
						<th>Value</th>
					</tr>
					<tr>
						<td>user.timezone</td>
						<td>Asia/Kolkata</td>
					</tr>
				</table>
			</td>
			<td>
				<table border="1" cellpadding="7">
					<caption>cellpadding = 7</caption>
					<tr>
						<th>Key</th>
						<th>Value</th>
					</tr>
					<tr>
						<td>user.timezone</td>
						<td>Asia/Kolkata</td>
					</tr>
				</table>
			</td>
			<td>
				<table border="1" cellspacing="10">
					<caption>cellspacing = 10</caption>
					<tr>
						<th>Key</th>
						<th>Value</th>
					</tr>
					<tr>
						<td>user.timezone</td>
						<td>Asia/Kolkata</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr>
			<td>
				<table border="1" cellpadding="5" rules="none">
					<caption>rules = none</caption>
					<tr>
						<th>Key</th>
						<th>Value</th>
					</tr>
					<tr>
						<td>user.timezone</td>
						<td>Asia/Kolkata</td>
					</tr>
				</table>
			</td>
			<td>
				<table border="1" cellpadding="7" rules="cols">
					<caption>rules = cols</caption>
					<tr>
						<th>Key</th>
						<th>Value</th>
					</tr>
					<tr>
						<td>user.timezone</td>
						<td>Asia/Kolkata</td>
					</tr>
				</table>
			</td>
			<td>
				<table border="1" cellpadding="7" rules="rows">
					<caption>rules = rows</caption>
					<tr>
						<th>Key</th>
						<th>Value</th>
					</tr>
					<tr>
						<td>user.timezone</td>
						<td>Asia/Kolkata</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr>
			<td>
				<table border="1" cellpadding="4" rules="groups">
					<caption>rules = groups</caption>
					<colgroup span="2" />
					<colgroup>
						<col />
						<col />
					</colgroup>
					<thead>
						<tr>
							<th colspan="2">colspan</th>
							<th colspan="2">rowspan</th>
						</tr>
						<tr>
							<th>col1</th>
							<th>col2</th>
							<th>col3</th>
							<th>col4</th>
						</tr>
					</thead>
					<tfoot>
						<tr>
							<th>col1</th>
							<th>col2</th>
							<th>col3</th>
							<th>col4</th>
						</tr>
						<tr>
							<th colspan="2">colspan</th>
							<th colspan="2">rowspan</th>
						</tr>
					</tfoot>
					<tbody>
						<tr>
							<td colspan="2" style="text-align: center">cell11</td>
							<td rowspan="2">cell13</td>
							<td>cell14</td>
						</tr>
						<tr>
							<td>cell21</td>
							<td>cell22</td>
							<td>cell24</td>
						</tr>
					</tbody>
					<tbody>
						<tr>
							<td>cell31</td>
							<td>cell32</td>
							<td>cell33</td>
							<td rowspan="2">cell34</td>
						</tr>
						<tr>
							<td colspan="2" style="text-align: center">cell41</td>
							<td>cell43</td>
						</tr>
					</tbody>
				</table>
			</td>
		</tr>
	</table>
	<h3>CSS: text &amp; font</h3>
	<table border="1" width="50%">
		<tr>
			<th>text-align</th>
			<td style="text-align: left;">This is a left aligned text.</td>
			<td style="text-align: center;">This is a center aligned text.</td>
			<td style="text-align: right;">This is a right aligned text.</td>
			<td style="text-align: justify;">This text alignment is justified.</td>
		</tr>
		<tr>
			<th>text-decoration</th>
			<td style="text-decoration: blink;">blink</td>
			<td style="text-decoration: line-through;">line-through</td>
			<td style="text-decoration: overline;">overline</td>
			<td style="text-decoration: underline;">underline</td>
		</tr>
		<tr>
			<th>text-transform &amp; font-variant</th>
			<td style="text-transform: capitalize;">capitalize</td>
			<td style="text-transform: lowercase;">LowercasE</td>
			<td style="text-transform: uppercase;">UppercasE</td>
			<td style="font-variant: small-caps;">SMall-capS</td>
		</tr>
		<tr>
			<th>font-family</th>
			<td style="font-family: cursive;">cursive</td>
			<td style="font-family: fantasy;">fantasy</td>
			<td style="font-family: monospace;">monospace</td>
			<td style="font-family: sans-serif;">sans-serif</td>
			<td style="font-family: serif;">serif</td>
		</tr>
		<tr>
			<th rowspan="2">font-size</th>
			<td style="font-size: inherit;">inherit</td>
			<td style="font-size: small;">small</td>
			<td style="font-size: smaller;">smaller</td>
			<td style="font-size: x-small;">x-small</td>
			<td style="font-size: xx-small;">xx-small</td>
		</tr>
		<tr>
			<td style="font-size: medium;">medium</td>
			<td style="font-size: large;">large</td>
			<td style="font-size: larger;">larger</td>
			<td style="font-size: x-large;">x-large</td>
			<td style="font-size: xx-large;">xx-large</td>
		</tr>
		<tr>
			<th rowspan="2">font-stretch</th>
			<td style="font-stretch: narrower;">narrower</td>
			<td style="font-stretch: semi-condensed;">semi-condensed</td>
			<td style="font-stretch: condensed;">condensed</td>
			<td style="font-stretch: extra-condensed;">extra-condensed</td>
			<td style="font-stretch: ultra-condensed;">ultra-condensed</td>
		</tr>
		<tr>
			<td style="font-stretch: wider;">wider</td>
			<td style="font-stretch: semi-expanded;">semi-expanded</td>
			<td style="font-stretch: expanded;">expanded</td>
			<td style="font-stretch: extra-expanded;">extra-expanded</td>
			<td style="font-stretch: ultra-expanded;">ultra-expanded</td>
		</tr>
		<tr>
			<th>font-style &amp; font-weight</th>
			<td style="font-style: italic;">italic</td>
			<td style="font-style: oblique;">oblique</td>
			<td style="font-weight: bolder;">bolder</td>
			<td style="font-weight: bold;">bold</td>
			<td style="font-weight: lighter;">lighter</td>
		</tr>
	</table>
	<h3>CSS: Cursor</h3>
	<table id="cursor" border="1" cellpadding="5pt">
		<tr>
			<td style="cursor: auto;">cursor: auto</td>
			<td style="cursor: default;">cursor: default</td>
			<td style="cursor: pointer; cursor: hand;">cursor: pointer</td>
			<td style="cursor: crosshair;">cursor: crosshair</td>
			<td style="cursor: text;">cursor: text</td>
			<td style="cursor: wait;">cursor: wait</td>
			<td style="cursor: help;">cursor: help</td>
			<td style="cursor: col-resize;">cursor: col-resize;</td>
		</tr>
		<tr>
			<td style="cursor: move;">cursor: move</td>
			<td style="cursor: all-scroll;">cursor: all-scroll</td>
			<td style="cursor: no-drop;">cursor: no-drop</td>
			<td style="cursor: not-allowed;">cursor: not-allowed</td>
			<td style="cursor: vertical-text;">cursor: vertical-text</td>
			<td style="cursor: progress;">cursor: progress</td>
			<td style="cursor: url('content/bullet.png'), auto;">cursor: url()</td>
			<td style="cursor: row-resize;">cursor: row-resize;</td>
		</tr>
		<tr>
			<td style="cursor: e-resize;">cursor: e-resize</td>
			<td style="cursor: w-resize;">cursor: w-resize</td>
			<td style="cursor: n-resize;">cursor: n-resize</td>
			<td style="cursor: s-resize;">cursor: s-resize</td>
			<td style="cursor: ne-resize;">cursor: ne-resize</td>
			<td style="cursor: nw-resize;">cursor: nw-resize</td>
			<td style="cursor: se-resize;">cursor: se-resize</td>
			<td style="cursor: sw-resize;">cursor: sw-resize</td>
		</tr>
	</table>
	<h3>CSS: background</h3>
	<table id="image" border="1">
		<tr>
			<td style="background-repeat: repeat-y;">repeat-y;</td>
			<td style="background-repeat: repeat-x;">repeat-x;</td>
			<td style="background-repeat: repeat;">repeat</td>
			<td style="background-repeat: no-repeat;">no-repeat</td>
			<td style="background-position: center">center</td>
			<td style="background-repeat: repeat; background-color: lightgray;">color+image</td>
		</tr>
		<tr>
			<td style="background-position: top right;">top right</td>
			<td style="background-position: right;">right</td>
			<td style="background-position: bottom right;">bottom right</td>
			<td style="background-position: top left;">top left</td>
			<td style="background-position: left;">left</td>
			<td style="background-position: bottom left;">bottom left</td>
		</tr>
	</table>
	<h3>CSS: Border</h3>
	<table id="border" rules="none" cellpadding="5pt" cellspacing="5pt">
		<tr>
			<td style="border-style: dashed;">dashed</td>
			<td style="border-style: dotted;">dotted</td>
			<td style="border-style: double;">double</td>
			<td style="border-style: groove;">groove</td>
			<td style="border-style: inset;">inset</td>
			<td style="border-style: outset;">outset</td>
			<td style="border-style: ridge;">ridge</td>
			<td style="border-style: solid;">solid</td>
		</tr>
		<tr>
			<td style="border-color: background; outline-style: dashed;">dashed</td>
			<td style="border-color: background; outline-style: dotted;">dotted</td>
			<td style="border-color: background; outline-style: double;">double</td>
			<td style="border-color: background; outline-style: groove;">groove</td>
			<td style="border-color: background; outline-style: inset;">inset</td>
			<td style="border-color: background; outline-style: outset;">outset</td>
			<td style="border-color: background; outline-style: ridge;">ridge</td>
			<td style="border-color: background; outline-style: solid;">solid</td>
		</tr>
		<tr>
			<td style="border-color: activeborder;">activeborder</td>
			<td style="border-color: activecaption;">activecaption</td>
			<td style="border-color: appworkspace;">appworkspace</td>
			<td style="border-color: background;">background</td>
			<td style="border-color: buttonface;">buttonface</td>
			<td style="border-color: buttonhighlight;">buttonhighlight</td>
			<td style="border-color: buttonshadow;">buttonshadow</td>
			<td style="border-color: buttontext;">buttontext</td>
		</tr>
		<tr>
			<td style="border-color: graytext;">graytext</td>
			<td style="border-color: highlight;">highlight</td>
			<td style="border-color: highlighttext;">highlighttext</td>
			<td style="border-color: inactiveborder;">inactiveborder</td>
			<td style="border-color: inactivecaption;">inactivecaption</td>
			<td style="border-color: inactivecaptiontext;">inactivecaptiontext</td>
			<td style="border-color: infobackground;">infobackground</td>
			<td style="border-color: infotext;">infotext</td>
		</tr>
		<tr>
			<td style="border-color: inherit;">inherit</td>
			<td style="border-color: menu;">menu</td>
			<td style="border-color: menutext;">menutext</td>
			<td style="border-color: scrollbar;">scrollbar</td>
			<td style="border-color: threeddarkshadow;">threeddarkshadow</td>
			<td style="border-color: threedface;">threedface</td>
			<td style="border-color: threedhighlight;">threedhighlight</td>
			<td style="border-color: threedlightshadow;">threedlightshadow</td>
		</tr>
		<tr>
			<td style="border-color: threedshadow;">threedshadow</td>
			<td style="border-color: transparent;">transparent</td>
			<td style="border-color: window;">window</td>
			<td style="border-color: windowframe;">windowframe</td>
			<td style="border-color: windowtext;">windowtext</td>
		</tr>
	</table>
	<h3>Color</h3>
	<table border="1">
		<tr>
			<td style="color: red">color: red</td>
			<td style="color: #00ff00;">color: #00ff00</td>
			<td style="color: rgb(0, 0, 255);">color: rgb(0,0,255)</td>
		</tr>
	</table>
	<h3>CSS3: column-rule</h3>
	<div style="width: 800pt; column-rule: 3px outset blue; -moz-column-rule: 3px outset blue; -webkit-column-rule: 3px outset blue; column-count: 3; -moz-column-count: 3; -webkit-column-count: 3; column-gap: 40px; -moz-column-gap: 40px; -webkit-column-gap: 40px;">
		<p>বাঙলার সূর্য সন্তান নেতাজী সুভাস চন্দ্র বোসের ১৮৯৭ সালে ২৩ জনুয়ারী উড়িষার কটক শহরে এক বাঙালি পরিবারে জন্ম হয়। ব্রিটিশ সাম্রাজ্যবাদকে ভারতবর্ষ থেকে বিতাড়িত করার জন্য যে সকল মহান ব্যক্তি, লড়াকু যোদ্ধা জীবন উৎসর্গ করেছেন নেতাজী সুভাষ চন্দ্র বোস তাঁদের মধ্যে অন্যতম। বিপ্লবী যোদ্ধারা তাঁকে নেতাজী বলে সম্বোধন করতেন। ভারতের যুব সম্প্রদায়কে নেতাজী বলেছিলেন "তোমরা আমাকে রক্ত দাও, আমি তোমাদের স্বাধীনতা দেব"।</p>
		<p>তিনি পরপর দুবার ইন্ডিয়ান ন্যাশনাল কংগ্রেসের প্রেসিডেন্ট নির্বাচিত হয়েছিলেন। পরবর্তীতে মহাত্মা গান্ধির সাথে রাজনৈতি মতাদর্শগত মতভেদের কারণে কংগ্রেসের অনাস্থার ফলে ওই পদ থেকে তাঁকে পদত্যাগ করতে হয়। নেতাজী বিশ্বাস করতেন, মহাত্মা গান্ধীর অহিংস নীতি স্বাধীনতা আদায়ে যথেষ্ট নয়। তাই তিনি সশস্ত্র বিপ্লববাদী প্রতিরোধের পক্ষ নিয়েছিলেন। তিনি অল-ইন্ডিয়া ফরওয়ার্ড ব্লক নামে পৃথক একটি রাজনৈতিক দল সৃষ্টি করেন। তিনি সাম্রাজ্যবাদী শাসন-শোষণের অবসান ঘটানোর জন্য সম্পূর্ণ স্বাধীনতার ডাক দিয়েছিলেন। জাপান-অধিকৃত সিঙ্গাপুরে রাশবিহারী বসুর তত্ত্বাবধানে ভারতীয় উপমহাদেশের যুদ্ধবন্দীদের নিয়ে গঠন করেন আজাদ-হিন্দু ফৌজ। এই ফৌজ নিয়ে তিনি উত্তরপূর্ব ভারতীয় সীমায় প্রবেশ করে ইম্ফল অবধি দখল করতে সক্ষম হন। ব্রিটিশরা তাঁকে ১১ বার জেলে পাঠিয়েছিল।</p>
	</div>
	<h3>CSS: counter</h3>
	<ul id="counter">
		<li>C</li>
		<li>C++</li>
		<li>Java
			<ul>
				<li>Java ME</li>
				<li>Java SE
					<ul>
						<li>JDK</li>
						<li>JRE</li>
					</ul>
				</li>
				<li>Java EE</li>
			</ul>
		</li>
		<li>.Net
			<ul>
				<li>VB</li>
				<li>C#</li>
				<li>ASP</li>
			</ul>
		</li>
	</ul>
</body>
</html>
